<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>排行榜</title>
    <script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script type="text/javascript" src="/js/plugins/jqPaginator/jq-paginator.min.js"></script>
    <script src="/js/plugins/js-cookie/js.cookie.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script type="text/javascript" src="/js/vue/common.js"></script>
</head>
<body>
<h1 style="text-align: center">
    排行榜
</h1>
<div class="item clearfix" id="app">
    <table border="1" cellspacing="10" cellpadding="10" >
        <th>用户</th>
        <th>操作</th>
       <tr v-for="a in authors">
           <td>{{a}}</td>
           <td><input type="button" value="+1" @click="increaseRankData(a)"/></td>
       </tr>
    </table>
    <h3>分数排行榜</h3>
    <div v-for="ele in ranks">
        <p>{{ele}}</p>
    </div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            ranks:{},
            authors:{}
        },
        methods:{
            subForm:function () {
                $('#edit_form').ajaxSubmit(function (data) {
                    if (data.success){
                        $('#title').val('');
                        $('#content').val('');
                        vue.doPage(1);
                    }
                })
            },
            searchRankData:function () {
                $.get(domainUrl + '/messageBoard/searchRankData',{},function (data) {
                    if (data.success){
                        vue.ranks = data.data;
                    }
                })
            },
            increaseRankData:function (authorName) {
                $.get(domainUrl + '/messageBoard/increaseRankData',{authorName:authorName},function (data) {
                    if (data.success){
                        vue.searchRankData();
                    }
                })
            }
        },
        mounted:function () {
            this.searchRankData();
            $.get(domainUrl + '/messageBoard/searchAllAuthors',{},function (data) {
                if (data.success){
                    vue.authors = data.data;
                }
            })
        }
    });
</script>
</body>
</html>
